<template>
  <div class="tabs">
    <div class="tabs-wrap">
      <scroll class="tabs-scroll" :scrollX="true" ref="tabsScroll">
        <ul class="tabs-container">
          <li
            class="tabs-item"
            v-for="(item, index) of tabs"
            :key="index"
            :class="isActive(index)"
            @click="setShowCompIndex(index)"
            ref="tab"
          >
            {{ item.name }}
          </li>
        </ul>
      </scroll>
      <div class="tabs-icon" @click="toggleDetail">
        <i class="iconfont icondayuhao icon" :class="iconReverse"></i>
      </div>
    </div>

    <tabs-detail :showDetail="showDetail" :tabs="tabs"></tabs-detail>
  </div>
</template>

<script type="text/ecmascript-6">
import homeData from 'assets/json/home.json'
import TabsDetail from './tabs-detail'
import Scroll from 'common/scroll/scroll'
import { tabsDetailMixin } from 'assets/js/mixin'

export default {
  mixins: [tabsDetailMixin],
  props: {},
  data() {
    return {
      tabs: homeData.data.tabs,
      showDetail: false
    }
  },
  computed: {
    iconReverse() {
      return this.showDetail ? 'icon-reverse' : ''
    }
  },
  methods: {
    toggleDetail() {
      this.showDetail = !this.showDetail
    },
    moveTabActive(index) {
      let elementX = this.$refs.tab[index].getBoundingClientRect().x
      let PosX =
        document.documentElement.scrollWidth / 2 -
        this.$refs.tab[0].clientWidth / 2

      let moveX = elementX - PosX

      let tabsScroll = this.$refs.tabsScroll
      let prevX = tabsScroll.scroll.X ? tabsScroll.scroll.X : 0

      let nextX = prevX - moveX
      nextX = Math.min(
        tabsScroll.scroll.minScrollX,
        Math.max(tabsScroll.scroll.maxScrollX, nextX)
      )

      this.$refs.tabsScroll.scrollTo(nextX, 0, 200)
    }
  },
  watch: {
    showCompIndex(index) {
      this.moveTabActive(index)
    }
  },
  components: {
    TabsDetail,
    Scroll
  }
}
</script>

<style lang="stylus" scoped ref="stylesheet/stylus">
.tabs {
  position: relative;

  .tabs-wrap {
    display: flex;
    align-items: center;
    background: #f2f2f2;
    box-shadow: 0 1.5px 4px -2px rgba(100, 100, 100, 0.7);

    .tabs-scroll {
      flex: 1;
      overflow: hidden;

      .tabs-container {
        display: inline-block;
        font-size: 0;
        white-space: nowrap;

        .tabs-item {
          display: inline-block;
          height: 0.57rem;
          line-height: 0.57rem;
          margin: 0 0.25rem;
          font-size: 0.26rem;
          white-space: nowrap;
          color: rgb(116, 116, 116);
          border-color: rgb(242, 242, 242);
          box-sizing: border-box;

          &.actived {
            color: rgb(237, 91, 0);
            border-bottom: 2px solid rgb(237, 91, 0);
          }
        }
      }
    }

    .tabs-icon {
      position: relative;
      flex: 0 0 0.68rem;
      width: 0.68rem;
      height: 0.55rem;
      line-height: 0.55rem;
      text-align: center;

      .icon {
        z-index: 100;
        position: absolute;
        left: 50%;
        top: 50%;
        display: inline-block;
        transform: translate3d(-50%, -50%, 0) rotate(90deg);
        transition: all 0.3s;
        font-size: 0.28rem;

        &.icon-reverse {
          transform: translate3d(-50%, -50%, 0) rotate(270deg);
        }
      }
    }
  }
}
</style>